<template>
	<div>
		<el-table :data="userdata" border style="width: 100%">
			<el-table-column fixed label="头像" width="150" height="100">
				<template slot-scope="scope">
					<img src="scope.row.usimg" />
				</template>
			</el-table-column>

			<el-table-column prop="usname" label="姓名" width="120">
			</el-table-column>
			<el-table-column prop="usphone" label="注册手机" width="120">
			</el-table-column>
			<el-table-column prop="uscard" label="注册身份证" width="120">
			</el-table-column>
			<el-table-column prop="ustype" label="账号状态" width="300">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button @click="show(scope.row)" type="text" size="small">修改</el-button>
					<el-button type="text" size="small" @click="ban(scope.row)">禁用</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog title="修改账号" :visible.sync="dialogFormVisible" :append-to-body="true">
			<!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
			<el-form :model="form">
				<el-form-item label="账号名字" :label-width="formLabelWidth">
					<el-input v-model="user.usname" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="密码" :label-width="formLabelWidth">
					<el-input v-model="user.uspass" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="手机号" :label-width="formLabelWidth">
					<el-input v-model="user.usphone" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="身份证号" :label-width="formLabelWidth">
					<el-input v-model="user.uscard" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<!-- 设置触发更新的方法 -->
				<el-button type="primary" @click="update">确 定</el-button>
			</div>
		</el-dialog>
	</div>

</template>

<script>
	var _this;
	export default {
		created() {
			_this = this;
		},
		//唤醒模态框
		data() {
			return {
				form: {},
				dialogFormVisible: false,
				formLabelWidth: "100px",
				user: {
					usid: '',
					usname: '',
					usphone: '',
					uscard: '',
					uspass: ''
				},
				userold: {
					usid: '',
					usname: '',
					usphone: '',
					uscard: '',
					uspass: ''
				},
				flag:true
			}
		},
		methods: {
			ban(param){
				_this.$axios.post(
				"/user/ban",
				{usid:param.usid}
				)
				.then(function(param) {
					console.log(param.data)
				})
				.catch(function(err) {
					console.log(err)
				})
			},
			show(param) {
				console.log(param);
				_this.user.usid = param.usid;
				_this.user.usname = param.usname;
				_this.user.usphone = param.usphone;
				_this.user.uscard = param.uscard;
				_this.user.uspass = param.uspass;

				_this.userold.usname = param.usname;
				_this.userold.usphone = param.usphone;
				_this.userold.uscard = param.uscard;
				_this.userold.uspass = param.uspass;


				//   设置点击按钮之后进行显示对话框
				this.dialogFormVisible = true;
			},
			update() {
				//   this.form.date = reformat(this.form.date);
				//    可以在html上面进行设置日期的格式化
			 //   将我们添加的信息提交到总数据里面




				var name = _this.$axios.post("/user/checkname", {
					name: _this.user.usname
				});
				var phone = _this.$axios.post("/user/checkphone", {
					phone: _this.user.usphone
				});
				var card = _this.$axios.post("/user/checkcard", {
					card: _this.user.uscard
				});
				_this.$axios.all([name, phone, card])
					.then(
						_this.$axios.spread(
							function(result1, result2, result3) {
								//修改过且重复
								if (result1.data == "error"&& _this.userold.usname!=_this.user.usname) {
									alert("用户名不能重复");
									_this.flag=false;
								}
								if (result2.data == "error"&&_this.userold.usphone!=_this.user.usphone) {
									alert("手机号不能重复");
									_this.flag=false;
								}
								if (result3.data == "error" &&_this.userold.uscard!=_this.user.uscard) {
									alert("身份证号不能重复");
									_this.flag=false;
								}
								if(_this.flag){
									_this.$axios.post(
											"/user/update", {
												"usname": _this.user.usname,
												"usphone": _this.user.usphone,
												"uscard": _this.user.uscard,
												"uspass": _this.user.uspass,
												"usid": _this.user.usid
											}
										)
										.then(function(param) {
											console.log(param.data);
								               
										})
										.catch(function(err) {
											console.log(err)
										})
								}
								
								_this.user.uscard = "";
								_this.user.usname = "";
								_this.user.uspass = "";
								_this.user.usphone = "";
								
								_this.userold.uscard = "";
								_this.userold.usname = "";
								_this.userold.uspass = "";
								_this.userold.usphone = "";
								_this.dialogFormVisible = false;
								_this.flag=true;
							}
						)
					)
					.catch(function(error) {
						console.log(error);
					})
					
			},
			cancel() {
			 // 取消的时候直接设置对话框不可见即可
				this.dialogFormVisible = false;
			}
		},
		props: {
			//子组件中设置一个必传参数,父组中通过属性操作v-bind传过来
			userdata: {
				type: Array,
				required: true
			}
		}
	}
</script>

<style>
</style>
